<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="/stylesheets/common.css">
    <link rel="stylesheet" href="/stylesheets/iconfont.css">
    <style>
        .header {
            background-color: rgb(64, 176, 224);
            border-radius: 10px;
            height: 140px;
        }

        .headimg {
            border: 4px solid white;
            border-radius: 50%;
            display: inline-block;
        }

        h5 {
            display: inline-block;
        }

        .patient {
            display: inline-block;
            background-color: rgba(212, 223, 235, 0.803);
            border-radius: 10px;
        }

        .wrap {
            height: 80px;
        }

        .wrap div {
            width: 47%;
            color: white;
            border-radius: 20px;
        }

        .reservation {
            background-color: rgb(164, 207, 246);
        }

        .consult {
            background-color: rgb(145, 240, 186);
        }

        .icon {
            width: 30px;
        }

        h4,
        p {
            margin-bottom: 0 !important;
        }

        .part {
            height: 100px;
            background-color: white;
            border-radius: 10px;
        }

        .part1 {
            height: 120px;
            background-color: white;
            border-radius: 10px;
        }

        
    </style>
</head>

<body>
    <div class="container">
        <div class="header mt-4 py-4 px-3 ">
            <img class="headimg" src="./images/1.webp" width="80px" alt="">
            <h5 style="color: white;" class="mx-2">李若凡</h5>
            <div class="patient p-1" style="color: white"><a href="./patient.html">就诊人管理</a></div>
        </div>
        <div class="wrap mt-4 d-flex justify-content-between">
            <div class="reservation d-flex align-items-center justify-content-around px-3">
                <img src="./images//guahao.png" class="icon" alt="">
                <h4 class="">挂号记录</h4>
            </div>
            <div class="consult d-flex align-items-center justify-content-around px-3">
                <img src="./images/fuwuzixun.png" class="icon" alt="">
                <h4>咨询记录</h4>
            </div>
        </div>
        <div class="part mt-4 p-3" title="此功能正在开发中...">
            <img width="40px" src="./images/peisong.png" alt="">
            <p class="py-1">配送订单</p>
        </div>
        <div class="part1 mt-4 p-3 ">
            <h5 style="font-weight:bold;">我的服务</h5>
            <div class="d-flex">
                <div class="mx-2">
                    <img width="40px" height="40px" src="./images/jiankang.png" alt="">
                    <p class="py-1">档案</p>
                </div>
                <div class="mx-2">
                    <img width="40px" height="40px" src="./images/shezhi.png" alt="">
                    <p class="py-1">设置</p>
                </div>
            </div>
        </div>
    </div>
   

</body>

</html>